import { XScrollableContainer } from './../../components/x-scrollable-container';
import { ExpeditionOrderDishManage } from './../../components/expeditionOrderDishManage';
import { StoreSvr } from './../../services/store';
import { Orderitem, Order } from './../../models/order';
import { Component, OnInit, Input, ViewChild, ChangeDetectorRef } from '@angular/core';
import * as R from 'ramda';

@Component({
    selector: 'classify-items',
    styleUrls: ['./index.scss'],
    template: `
        <div class="classify_items_container">
            <x-scrollable-container (change)="PagingMeaageChange($event)">
                <ul class="classify_items_list">
                    <li *ngFor="let item of groupedItems | groupedItemsTransform;trackBy:trackById" [ngStyle]="{'background-color': bgColor }" class="scroll_item">
                        <div class="suspended_orderitem_container item category" *ngIf="item.type=='category'">
                            <span class="item_name">{{item.name}}</span>
                        </div>
                        <div item *ngIf="item.type!='category'" class="item" (click)="item.deliverTime||addKitchenOrderToExpeditionOrderDish(item)">
                            <suspended-orderitem  [orderItem]="item"  [order]="order"></suspended-orderitem>
                        </div>
                    <li>
                    <li class="center" *ngIf="orderItems&&orderItems.length==0">请选择订单</li>
                </ul>
            </x-scrollable-container>
            
            <div class="bottom" *ngIf="pagingInfo&&pagingInfo.previousCount || pagingInfo&&pagingInfo.nextCount">
                <page-btn [btnType]="'left-right'" [upNum]="pagingInfo&&pagingInfo.previousCount" [downNum]="pagingInfo&&pagingInfo.nextCount" (onUp)="up()" (onDown)="down()"></page-btn>
            </div>
        </div>
    `
})
export class ClassifyItems implements OnInit {
    @ViewChild(XScrollableContainer)
    private xScrollableContainer: XScrollableContainer;
    PagingMeaageChange(event) {
        this.pagingInfo = event;
    }

    ngOnChanges(change) {
        if (change.orderItems) {
            this.changeDetectorRef.detectChanges();
            this.xScrollableContainer.childrenChanged();
        }
    }


    //todo 这样子传参数 好不好
    @Input() order: Order;
    @Input() bgColor: string;
    @Input() orderItems: Array<Orderitem>;
    constructor(private storeSvr: StoreSvr, private changeDetectorRef: ChangeDetectorRef) { }
    get groupedItems(): {

    } {
        const result = this.orderItems && this.groupFn(this.orderItems) || [];

        return result;
    }
    pagingInfo: {
        previousCount: number, nextCount: number, turningPage(count)
    }
    ngOnInit() {
        const categories = this.storeSvr.currentKitchenSolutions
            .map(kitchensolution => kitchensolution.categories);

    }
    groupFn = R.groupBy((orderItem: Orderitem) => {
        return orderItem.categories[0].name;
    })

    private trackByKey(index: number, value: any) {
        return value.key;
    }


    private trackById(index: number, orderItem: any) {
        return orderItem.id;
    }

    addKitchenOrderToExpeditionOrderDish(orderItem) {
        ExpeditionOrderDishManage.current.addKitchenOrderItem(this.order, orderItem.id);
    }

    private up() {
        this.pagingInfo.turningPage(-1);
    }

    private down() {
        this.pagingInfo.turningPage(1);
    }
}


